<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form ref="checkForm" :model="user" :rules="ruleValidate" :label-width="100">
            <form-item prop="username" label="用户名：">
                <i-input  maxlength="20" disabled v-model="user.username" placeholder="请输入用户名"></i-input>
            </form-item>
            <form-item prop="password" label="密码：" v-if="user.userId!=null">
                <i-input value="******" disabled  placeholder="请输入密码"></i-input>
            </form-item>
            <form-item prop="password" label="密码：" v-if="user.userId==null">
                <i-input maxlength="20" v-model="user.password"  placeholder="请输入密码"></i-input>
            </form-item>
            <form-item prop="nickname" label="昵称：">
                <i-input maxlength="20" v-model="user.nickname" placeholder="请输入昵称"></i-input>
            </form-item>
            <form-item prop="orgName" label="机构：">
                <span @click="selectOrg()">
                    <i-input readonly  v-model="user.orgName" placeholder="请选择机构"></i-input>
                </span>
            </form-item>
            <form-item prop="email" label="邮箱：">
                <i-input v-model="user.email" placeholder="请输入邮箱"></i-input>
            </form-item>
            <form-item prop="mobile" label="手机：">
                <i-input type="number" maxlength="11" v-model="user.mobile" placeholder="请输入手机"></i-input>
            </form-item>
            <form-item prop="mobile" label="角色：">
                <i-button  @click="selectRole()" icon="ios-search" >选择角色</i-button>
                <div>{{roleName}}</div>
            </form-item>
            <form-item label="状态：">
                <radio-group  v-model="user.status">
                    <radio v-for="item in statusList" :label="item.value" :key="item.value">{{item.label}}</radio>
                </radio-group>
            </form-item>
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data:{
        user:{
            status:1,
            orgName:'',
            orgId:null
        },
        roleName:"",
        statusList:[{"label":"正常","value":1},{"label":"禁用","value":0}],
        ruleValidate : {
			username: [
				{ required: true, message: '账号不能为空', trigger: 'blur' }
			],
			password: [
				{ required: true, message: '密码不能为空', trigger: 'blur' }
			],
			nickname: [
				{ required: true, message: '昵称不能为空', trigger: 'blur' }
			],
			orgName: [
				{ required: true, message: '请选择机构', trigger: 'change' }
			]
		},
		okUtils:null,
		okLayer:null
    },
    methods: {
        load : function(){
            layui.use(["okUtils", "okLayer"], function () {
                 vm.okUtils = layui.okUtils;
                 vm.okLayer = layui.okLayer;
                 if(vm.user.userId!=undefined){
                     vm.okUtils.ajaxCloud({
                        url:"/sys/user/get",
                        param : {userId:vm.user.userId},
                        close : false,
                        success : function(result) {
                            vm.user = result.msg;
                            vm.user.roleNameList.forEach(function(role) {
                                  vm.roleName+=role+",";
                            });
                            if(vm.roleName.endsWith(",")){
                                vm.roleName = vm.roleName.substring(0,vm.roleName.length-1);
                            }
                        }
                     });
                 }
            });
	    },
        acceptClick : function(dialog){
          vm.$refs.checkForm.validate(function(valid){
            if (valid) {
                 vm.okUtils.ajaxCloud({
                    url:"/sys/user/save",
                    param : vm.user,
                    json:true,
                    success : function(result) {
                         vm.okLayer.msg.greenTick(result.msg, function () {
                              dialog.load();
                         })
                    }
                 });
            }
          });
	    },
	    selectOrg : function(){
            vm.okUtils.dialogOpen({
                title: '选择机构',
                id:'org',
                url: "sys/user/org.html",
                scroll : true,
                width: '300px',
                height: '500px',
                success : function(dialog) {

                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
	    },
	    selectRole:function(){
	        var that = this;
	        vm.okUtils.dialogOpen({
                title: '选择角色',
                id:'org',
                url: "sys/user/role.html",
                scroll : true,
                width: '60%',
                height: '80%',
                success : function(dialog) {
                    dialog.vm.user.userId = that.user.userId;
		        	dialog.vm.user.roleIdList = that.user.roleIdList;
		        	dialog.vm.setTargetKeys();
                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
	    },
	    setRoleName:function(){

        }
    },
    created: function() {

    }
});
</script>
</body>
</html>
